<template>
    <ul class="recursive-ul">
        <li>
            <div class="item"
                 @click="openChild(itemData)">
                <p>{{itemData.ProjectName}}</p>
                <p>
                    <span>{{itemData.Total}}个</span>
                    <x-icon type="ios-arrow-right"
                            size="20"
                            fill="#999"
                            v-if="itemData.SubEntity"
                            v-show="!itemData.open"></x-icon>
                    <x-icon type="ios-arrow-down"
                            size="20"
                            fill="#999"
                            v-if="itemData.SubEntity"
                            v-show="itemData.open"></x-icon>
                </p>
            </div>
            <statisticsDetailItem v-show="itemData.open"
                                  v-if="itemData.SubEntity"
                                  v-for="(item,index) in itemData.SubEntity"
                                  :key="index"
                                  :itemData="item"></statisticsDetailItem>
        </li>
    </ul>
</template>
<script>
export default {
    name: 'statisticsDetailItem',
    props: {
        itemData: {
            default: () => { }
        }
    },
    methods: {
        openChild (item) {
            this.$set(item, 'open', !item.open)
        }
    }
}
</script>
<style scoped>
.recursive-ul .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    padding-left: 20px;
    border-bottom: 1px solid #f4f4f4;
}
.item + .recursive-ul {
    padding-left: 20px;
}
.recursive-ul p {
    line-height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
}
.recursive-ul span {
    color: #999;
}
</style>
